<template>
    <div>
      <Modal
        title="创建课程"
        v-model="courseModal"
        :closable="false"
        :mask-closable="false">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
          <FormItem label="学科名称" prop="subject">
            <Input size="large" v-model="formValidate.subject" placeholder="请填写学科名称" />
          </FormItem>
          <FormItem label="教材名称" prop="textbooks">
            <Input size="large" v-model="formValidate.textbooks" placeholder="请填写教材名称" />
          </FormItem>
          <FormItem label="课程名称" prop="course">
            <Input size="large" v-model="formValidate.course" placeholder="请填写课程名称" />
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="text" @click="handleReset('formValidate')" v-if="!btnLoading">取消</Button>
          <Button type="success" :loading="btnLoading" @click="handleSubmit('formValidate')" icon="ios-paperplane">创建</Button>
        </div>
      </Modal>
      <Card style="width:100%" class="has-btn-card right-btn-card" dis-hover>
        <p slot="title">
          <span>我教的课</span>
          <span class="card-left-action active">全部</span>
          <span class="card-left-action">进行中</span>
          <span class="card-left-action">已归档</span>
        </p>
        <div slot="extra">
          <Button type="text" icon="plus" @click="courseModal = true">创建课程</Button>
          <Button type="text" icon="ios-book">查看教材</Button>
        </div>

        <Table :columns="columns1" :data="data1"></Table>
        <div class="page-component">
          <Page :total="100"></Page>
        </div>
      </Card>
    </div>
</template>
<script>
  export default {
    data () {
      return {
        courseModal: false,
        btnLoading: false,
        formValidate: {
          subject: '',
          textbooks: '',
          course: ''
        },
        ruleValidate: {
          subject: [{required: true, message: '请填写学科名称', trigger: 'blur'}],
          textbooks: [{required: true, message: '请填写教材名称', trigger: 'blur'}],
          course: [{required: true, message: '请填写课程名称', trigger: 'blur'}]
        },
        columns1: [
          {
            title: '课程名称',
            key: 'name',
            width: 250,
            render: (h, params) => {
              return h('a', {
               on: {
                 click: () => {
                   this.$router.push({path: '/courseIndex'})
                 }
               }
              }, params.row.name)
            }
          },
          {
            title: '所属专业',
            key: 'age'
          },
          {
            title: '创建日期',
            key: 'created'
          },
          {
            title: '结课日期',
            key: 'endAd'
          },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            width: 225,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.$router.push({path: '/prepareLessons'})
                    }
                  }
                }, '备课'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '5px'
                  }
                }, '发布'),
                h('Button', {
                  props: {
                    type: 'text',
                    size: 'small'
                  },
                  style: {
                    marginLeft: '5px'
                  }
                }, '归档'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '删除后无法恢复哦！',
                    placement: 'bottom-end'
                  },
                  on: {
                    'on-ok': () => {
                      console.log(params)
                    }
                  }
                }, [
                  h('Button', {
                    props: {type: 'text'}
                  }, '删除')
                ])
              ])
            }
          }
        ],
        data1: [
          {
            name: 'John Brown',
            age: 18,
            created: '2016-10-03',
            endAd: '2016-10-03'
          }
        ]
      }
    },
    methods: {
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.btnLoading  = true
            this.$Message.success('Success!');
          }
        })
      },
      handleReset (name) {
        this.courseModal = false
        this.btnLoading  = false
        this.$refs[name].resetFields()
      }
    }
  }
</script>
